<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!--数据表格-->
<div class="layui-margin-3 layui-anim layui-anim-upbit">
    <table class="layui-hide" id="ID-treeTable-demo"></table>
</div>

<script type="text/html" id="treeTableHeader">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-border-purple layui-btn-sm" lay-event="addMenu">添加一级菜单</button>
    </div>
</script>

<script type="text/html" id="treeTableRight">
    <div class="layui-btn-container">
        {{# if(d.url === 'javascript:void(0);') { }}
        <a class="layui-btn layui-btn-primary layui-border-orange layui-btn-xs" lay-event="addChild">添加二级菜单</a>
        <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="detail">编辑菜单信息</a>
        {{# } else { }}
        <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="detail">编辑菜单信息</a>
        {{# } }}
    </div>
</script>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['treeTable', 'layer', 'jquery'], function () {
        let treeTable = layui.treeTable;
        let layer = layui.layer;
        let $ = layui.jquery;

        // 渲染
        let inst = treeTable.render({
            elem: '#ID-treeTable-demo',
            url: '/getAllMenuData',
            tree: {
                view: {
                    expandAllDefault: true, // 是否默认展开全部节点
                    indent: 20 // 层级缩进量
                }
            },
            toolbar: '#treeTableHeader',
            cols: [
                [
                    {field: 'id', title: 'ID', width: 120},
                    {field: 'name', title: '菜单名称'},
                    {field: 'url', title: '菜单链接'},
                    {field: 'icon', title: '菜单图标'},
                    {field: 'parent', title: '上级编号', width: 100, align: "center"},
                    {field: 'level', title: '菜单级别', width: 100, align: "center"},
                    {
                        field: 'status', title: '状态', align: "center", width: 150, templet: function (d) {
                            return d.status === 1 ? '<span style="color: green;">使用中</span>' : '<span style="color: red;">已停用</span>';
                        }
                    },
                    {fixed: "right", title: "操作", width: 205, align: "center", toolbar: "#treeTableRight"}
                ]
            ]
        });

        // 表头工具栏工具事件
        treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
            // 获取选中行
            if (obj.event === "addMenu") {
                layer.msg('添加一级菜单')
            }
        });

        // 单元格工具事件
        treeTable.on('tool(' + inst.config.id + ')', function (obj) {
            let layEvent = obj.event; // 获得 lay-event 对应的值
            let trElem = obj.tr;
            let trData = obj.data;
            let tableId = obj.config.id;
            if (layEvent === "detail") {
                layer.open({
                    type: 2,
                    title: '编辑菜单信息',
                    area: ['800px', '480px'],
                    scrollbar: false,
                    content: ['/toMenuInfoEdit/' + trData.id, 'no']
                });
            } else if (layEvent === "addChild") {
                // let data = {id: Date.now(), name: "新节点"};
                // let newNode2 = treeTable.addNodes(tableId, {
                //     parentIndex: trData["LAY_DATA_INDEX"],
                //     index: -1,
                //     data: data
                // });
                layer.msg('添加二级菜单');
            }
        });
    });
</script>

</body>
</html>